/**
 * Created by fanbo on 2017-07-19.
 */
var modelBasicTemplete = require('html!./model_basic_info_add.html');
require('./modelType.less');
module.exports = {
  template: modelBasicTemplete,
  data:function(){
    return{
      sceneOptions:[],//场景
      industryOptions:[],//行业
      userId:localStorage.getItem('userId'),
      modelName:'',//模型名称
      modelDesc:'',//模型描述
      sceneValue:'',//场景名称
      industryValue:'',//行业名称
      modelPicName:'',//缩略图地址
      ///
      modelScene:'',//场景名称
      modelSceneName:'',
      modelId:'',
      modelIndustry:'',//行业名称
      modelIndustryName:''
    }
  },
  created:function(){
    if(this.$route.query.modelId!=null && this.$route.query.modelId!=""){
      this.modelId = this.$route.query.modelId;
    }

    $('body').delegate('.ico1','click',function(e){
      e.stopPropagation();
      var $this = $(this);
      $this.parents('li').remove();
      var entName = $this.siblings('span').eq(0).text();
      $.each($('#chooseEnt li'),function(){
        var me = $(this);
        if(me.find('span').eq(0).text() == entName){
          me.removeClass('ent-br');
        }
      });
    });

  },
  beforeMount:function(){
    this.industryList();
    this.sceneList();

  },
  mounted:function () {
    this.getModelDataById();
    $('#chooseEnt').on('click','li',function(e){
      //e.stopPropagation();
      var $this = $(this);
      if (!$this.is('.ent-br')) {
        $this.addClass('ent-br');
        $this.append('<span class="icon1-right"></span>');
      }else{
        $this.removeClass('ent-br');
        $this.find('.icon1-right').remove();
      }
    });
    $('#chooseScene').on('click','li',function(e){
      //e.stopPropagation();
      var $this = $(this);
      if (!$this.is('.ent-br')) {
        $this.addClass('ent-br');
        $this.append('<span class="icon1-right"></span>');
      }else{
        $this.removeClass('ent-br');
        $this.find('.icon1-right').remove();
      }
    });

  },
  updated:function(){
    //this.initCommonModel();
  },
  methods:{
    //场景选择
    addScene:function(){
      var lay = layer.open({
        type: 1,
        title: false,
        content: $('#choose-scene'),
        area: ['620px', '410px'],
        cancel:function(){
          $.each($('#chooseScene li'),function(){
            var $this = $(this);
            if($this.hasClass('ent-br')){
              $this.removeClass('ent-br');
              $this.find('.icon1-right').remove();
            }
          });
          layer.close(lay);
        }
      });
      //给选中的值附上有背景的属性ent-br
      $.each($('.scene li'),function(){
        var $this = $(this);
        $.each($('#chooseScene li'),function(){
          var $me = $(this);
          if($me.find('span').eq(0).text()==$this.find('span').eq(0).text()){
            $me.addClass('ent-br');
            if(!$me.children().hasClass('icon1-right')){
              $me.append('<span class="icon1-right"></span>');
            }

          }
        });
      });
      //场景确定
      $('#conScene').click(function(){
        var flag = null;
        $.each($('#chooseScene li'),function(){
          flag = false;
          var $this = $(this);
          $.each($('.scene li'),function(){
            var $me = $(this);
            if($me.find('span').eq(0).text()==$this.find('span').eq(0).text()){
              flag=true;
              if(!$this.hasClass('ent-br')){
                $me.remove();
              }
            }
          });
          if($this.hasClass('ent-br') && !flag){
            $('.scene').prepend('<li><span style="display: none">'+$this.find('span').eq(0).text()+'</span><span class="choosed">' + $this.find('span').eq(1).text() + '</span><span class="ico1"></span></li>');
          }
        });
        layer.close(lay);
      });
      $("#conSceneRtn").click(function () {
        $.each($('#chooseScene li'),function(){
          var $this = $(this);
          if($this.hasClass('ent-br')){
            $this.removeClass('ent-br');
            $this.find('.icon1-right').remove();
          }
        });
        layer.close(lay);
      });
    },
    //行业选择
    addEnt:function(){
      var lay = layer.open({
        type: 1,
        title: false,
        content: $('#choose-ent'),
        area: ['620px', '410px'],
        cancel:function(){
          $.each($('#chooseEnt li'),function(){
            var $this = $(this);
            if($this.hasClass('ent-br')){
              $this.removeClass('ent-br');
              $this.find('.icon1-right').remove();
            }
          });
          layer.close(lay);
        }
      });
      //给选中的值附上有背景的属性ent-br
      $.each($('.ent li'),function(){
        var $this = $(this);
        $.each($('#chooseEnt li'),function(){
          var $me = $(this);
          if($me.find('span').eq(0).text()==$this.find('span').eq(0).text()){
            $me.addClass('ent-br');
            if(!$me.children().hasClass('icon1-right')){
              $me.append('<span class="icon1-right"></span>');
            }
          }
        });
      });
      //点击确认事件
      $('#conEnt').click(function(){
        var flag = null;
        $.each($('#chooseEnt li'),function(){
          flag = false;
          var $this = $(this);
          $.each($('.ent li'),function(){
            var $me = $(this);
            if($me.find('span').eq(0).text()==$this.find('span').eq(0).text()){
              flag=true;
              if(!$this.hasClass('ent-br')){
                $me.remove();
              }
            }
          });
          if($this.hasClass('ent-br') && !flag){
            $('.ent').prepend('<li><span style="display: none">'+$this.find('span').eq(0).text()+'</span><span class="choosed">' + $this.find('span').eq(1).text() + '</span><span class="ico1"></span></li>');
          }
        });
        layer.close(lay);
      });
      $("#conBntRtn").click(function () {
        $.each($('#chooseEnt li'),function(){
          var $this = $(this);
          if($this.hasClass('ent-br')){
            $this.removeClass('ent-br');
            $this.find('.icon1-right').remove();
          }
        });
        layer.close(lay);
      });
    },
    //行业下拉框
    industryList:function(){
      var me = this;
      this.$http.get('/eyeIndustryController/getIndustryList.do')
        .then(function(res) {
          if(res.data.status === 'OK'){
            this.industryOptions = res.data.result.list;
          }else{
            console.log('行业查询失败');
          }
        }.bind(this));
    },
    //场景下拉框
    sceneList:function(){
      var me = this;
      this.$http.get('/eyeSceneController/getSceneList.do')
        .then(function(res) {
          if(res.data.status === 'OK'){
            this.sceneOptions = res.data.result.list;
          }else{
            console.log('场景查询失败');
          }
        }.bind(this));
    },
    addBasicInfo:function(){
      var me = this;
      if(me.modelName.trim().length==0){
        layer.msg('模型名称不能为空');
        return;
      };
      if(me.modelName.trim().length>=20){
        layer.msg('模型名称长度不能超过20个字符');
        return;
      };
      if(me.modelDesc.trim().length==0){
        layer.msg('模型介绍不能为空');
        return;
      }
      //获取行业的值
      var induVal="";
      var lis = $("#entDiv ul").find("li");
      if(lis<=1){
        layer.msg('模型所属行业不能为空');
        return;
      }else{
        lis.each(function () {
          if(!$(this).hasClass("add-li")){
            induVal = induVal +$(this).find('span').eq(0).text()+";";
          }else{
            if(induVal!=""){
              induVal=induVal.substring(0,induVal.length-1);
            }
          }
        });
        if(induVal==""){
          layer.msg('模型所属行业不能为空');
          return;
        }
      }
      //获取场景的值
      var sceneVal="";
      var lis = $("#sceneDiv ul").find("li");
      if(lis<=1){
        layer.msg('模型所属场景不能为空');
        return;
      }else{
        lis.each(function () {
          if(!$(this).hasClass("add-li")){
            sceneVal = sceneVal +$(this).find('span').eq(0).text()+";";
          }else{
            if(sceneVal!=""){
              sceneVal=sceneVal.substring(0,sceneVal.length-1);
            }
          }
        });
        if(sceneVal==""){
          layer.msg('模型所属场景不能为空');
          return;
        }
      }
      this.$http.get('/eyeModelController/addModelBasicInfo.do?modelIdOld='+me.modelId+'&modelName='+me.modelName+'&userId='+me.userId+'&industryId='+induVal+'&sceneId='+sceneVal+'&picUrlName='+me.modelPicName+'&modelDesc='+me.modelDesc).then(function(res) {
        //获取模型详情
        console.log('模型基本信息，请求后返回结果: ', res);
        if(res.data.status === 'OK') {
          layer.msg(res.data.message);
          me.$router.push({ path: '/product/algorithmSet', query: { modelId: res.data.result,modelName:me.modelName,modelPic:me.modelPicName }});
        }else {
          layer.msg(res.data.message);
        }
      });
    },

    rtnModelList:function () {
      var me = this;
      me.$router.push({ path: '/product/model-list'});
    },
    //算法设置页面点击上一步回到新增页面
    getModelDataById:function(){
      var me = this;
      this.$http.get('/eyeModelController/getModelDataById.do?modelId='+this.modelId)
        .then(function(res) {
          if(res.data.status === 'OK'){
            this.modelName = res.data.result.modelData.modelName;
            this.modelDesc = res.data.result.modelData.modelDesc;
            this.modelId = res.data.result.modelData.id;
            this.modelIndustry = res.data.result.modelData.industryCode;
            this.modelIndustryName = res.data.result.modelData.industryName;
            this.modelScene = res.data.result.modelData.sceneCode;
            this.modelSceneName = res.data.result.modelData.sceneName;
            //进入编辑页面，给行业和场景附上初始值。
            if (this.modelIndustry != null && this.modelIndustry != ""
              && this.modelIndustryName != null && this.modelIndustryName != "") {
              var industryObj = this.modelIndustry.split(";");
              var industryNameObj = this.modelIndustryName.split(";");
              $.each(industryObj, function (i, val) {
                var valName1 = industryNameObj[i];
                var html = '<li><span style="display: none">' + val + '</span><span class="choosed">' + valName1 + '</span><span class="ico1"></span></li>';
                $('.ent').prepend(html);
              });
              //给选中的值附上有背景的属性ent-br
              $.each($('.ent li'),function(){
                var $this = $(this);
                $.each($('#chooseEnt li'),function(){
                  var $me = $(this);
                  if($me.find('span').eq(0).text()==$this.find('span').eq(0).text()){
                    $me.addClass('ent-br');
                    if(!$me.children().hasClass('icon1-right')){
                      $me.append('<span class="icon1-right"></span>');
                    }
                  }
                });
              });
            }
            if (this.modelScene != null && this.modelSceneName != null
              && this.modelScene != "" && this.modelSceneName != "") {
              var sceneObj = this.modelScene.split(";");
              var sceneNameObj = this.modelSceneName.split(";");
              $.each(sceneObj, function (i, val) {
                var valName = sceneNameObj[i];
                $('.scene').prepend('<li><span style="display: none">'+val+'</span><span class="choosed">' + valName + '</span><span class="ico1"></span></li>');
              });
              //给选中的值附上有背景的属性ent-br
              $.each($('.scene li'),function(){
                var $this = $(this);
                $.each($('#chooseScene li'),function(){
                  var $me = $(this);
                  if($me.find('span').eq(0).text()==$this.find('span').eq(0).text()){
                    $me.addClass('ent-br');
                    if(!$me.children().hasClass('icon1-right')){
                      $me.append('<span class="icon1-right"></span>');
                    }
                  }
                });
              });
            }
          }
        }.bind(this));
    },
  }

}
